<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.open_add_more {
				animation: open 0.5s ease-in-out 0s infinite;
				animation-iteration-count: 1;
				/*播放一次*/
				animation-fill-mode: forwards;
				/*停在最后一帧*/
			}
			
			@keyframes open {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(45deg);
				}
			}
			
			.close_add_more {
				animation: close 0.5s ease-in-out 0s infinite;
				animation-iteration-count: 1;
				/*播放一次*/
				animation-fill-mode: forwards;
				/*停在最后一帧*/
			}
			
			@keyframes close {
				from {
					transform: rotate(45deg);
				}
				to {
					transform: rotate(0deg);
				}
			}
		</style>
	</head>

	<body>
		<img src="https://s2.ax1x.com/2019/03/21/A15nF1.png" />
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$("img").click(function() {
			if($(this).hasClass("open_add_more")) {
				$(this).addClass("close_add_more").removeClass("open_add_more");

			} else {
				$(this).addClass("open_add_more").removeClass("close_add_more");
			}

		})
	</script>

</html>